<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/aui.css" rel="stylesheet" type="text/css"/>
    <link href="./css/aui-iconfont.css" rel="stylesheet"/>
    <link href="./css/index.css" rel="stylesheet" type="text/css"/>
    <style>
    #topbar{
        width: calc(100% - 30px);
    }
        #refresh{
            float: right;
            width: 20px;
            margin-left: 5px;
            padding-left: 5px;
            border-radius: 5px 0 0 5px;
            margin-top: 2px;
            color:#ffffff;
            background: #1E9FFF;
            cursor: pointer;
        }
        #frame{
            position: fixed;
            width: 100%;
            height: calc(100% - 25px);
            margin: 0;
            padding: 0;
            border: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="aui-col-xs-12">
    <div class="aui-col-xs-12 aui-text-center" id="topbar">
        <div class="aui-col-xs-2">
            <div class="tab" id="tab1" onclick="select(this,1)">生成界面</div>
        </div>
        <div class="aui-col-xs-2">
            <div class="tab select" id="tab2"  onclick="select(this,2)">API管理</div>
        </div>
        <div class="aui-col-xs-2">
            <div class="tab"  id="tab3"  onclick="select(this,3)">JSON格式化</div>
        </div>
        <div class="aui-col-xs-2">
            <div class="tab" id="tab4"  onclick="select(this,4)">工具</div>
        </div>
        <div class="aui-col-xs-2">
            <div class="tab" id="tab5"  onclick="select(this,5)">我的</div>
        </div>
        <div class="aui-col-xs-2">
            <div class="tab" id="tab6"  onclick="select(this,6)">分析</div>
        </div>
    </div>
    <div id="refresh">
        <span onclick="reloadFrm()"><i class="aui-iconfont aui-icon-refresh"></i></span>
    </div>
</div>
<iframe id="frame" src="./frm/frm2.html"></iframe>
<script src="./js/api.js" type="text/javascript"></script>
 <script type="text/javascript">
     //tab切换
     function select(obj,index){
         $api.removeCls($api.dom(".tab.select"),'select');
         $api.addCls(obj,'select');
         var html;
         switch (index) {
             case 1:
                 html="frm1.html";
                 break
             case 2:
                 html="frm2.html";
                 break
             case 3:
                 html="frm3.html";
                 break
             case 4:
                 html="frm4.html";
                 break
             case 5:
                 html="frm5.html";
                 break
             case 6:
                 html="frm6.html";
                 break
         }
         $api.byId("frame").src="./frm/"+html;
         //$api.setStorage("index",index);
     }
     function reloadFrm(){
         var frm = $api.byId("frame");
         $api.attr(frm,"src",$api.attr(frm,"src"));
     }
     // function check(){
     //     var index = $api.getStorage("index");
     //     if(index!=undefined){
     //         var dom = $api.byId("tab"+index);
     //         select(dom,index);
     //     }
     // }
     // check();
 </script>
</body>
</html>
